<template>
  <div>
    <el-input
      ref="input"
      v-model="data"
      :placeholder="placeholder"
      clearable
      @focus="clickInput"
      @clear="clearData">
    </el-input>

    <el-dialog title="选择部门" :visible.sync="dialogVisible" width="30%" @close="handleClose" @opened="handleOpen">
      <div class="diaPart">
        <el-input
          placeholder="请输入部门名称进行搜索"
          v-model="filterText">
        </el-input>
        <div class="textPart">
          <el-tree
            class="filter-tree"
            :data="textOptions"
            :props="defaultProps"
            node-key="deptId"
            show-checkbox
            :default-expand-all="defaultExpandAll"
            :check-strictly="checkStrictly"
            :filter-node-method="filterNode"
            :default-checked-keys="defaultArr"
            :default-expanded-keys="defaultArr"
            @check-change="handleCheckChange"
            ref="tree">
          </el-tree>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitDept">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import request from '@/utils/request'
export default {
  name: 'selectDept',
  props:{
    value: {             // 绑定值
      type: String,
      default: ''
    },
    placeholder: {       // 默认提示语
      type: String,
      default: '请点击选择部门'
    },
    defaultExpandAll: {  // 是否默认展开所有节点
      type: Boolean,
      default: false
    },
    checkStrictly: {     // 是否断开上下级部门之间的关联
      type: Boolean,
      default: true
    },
    multiple: {          // 是否可以多选
      type: Boolean,
      default: true
    },
  },
  data() {
    return {
      data: '',
      dialogVisible: false,
      filterText: '',
      textOptions: [],
      defaultProps: {
        children: 'children',
        label: 'deptName'
      },
      checkDept: [],
      defaultArr: []
    };
  },
  created() {
    this.getDeptData()
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  methods: {
    clickInput() {
      this.$refs.input.blur()
      this.dialogVisible = true
    },
    clearData() {
      this.$emit('input', '');
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.deptName.indexOf(value) !== -1;
    },
    handleOpen() {
      if(this.value) {
        this.defaultArr = this.value.split(',')
        setTimeout(() => {
          this.checkDept = this.$refs.tree.getCheckedNodes()
        }, 800)
      }
    },
    handleClose() {
      this.checkDept = []
      this.filterText = ''
    },
    handleCheckChange(data, checked, indeterminate) {
      if(!this.multiple && checked && this.checkDept.length > 0) {
        this.checkDept = [data]
        this.$refs.tree.setCheckedNodes(this.checkDept)
      }else {
        this.checkDept = this.$refs.tree.getCheckedNodes()
      }
    },
    submitDept() {
      if(this.checkDept.length > 0) {
        let tempName = [],tempKeys = []
        this.checkDept.forEach(item => {
          tempName.push(item.deptName)
          tempKeys.push(item.deptId)
        })
        this.data = tempName.join()
        this.$emit('input', tempKeys.join());
        this.dialogVisible = false
      }else {
        this.$message({
          message: '请先选择部门',
          type: 'warning'
        });
      }
    },
    getDeptData() {
      request({
        url: '/system/dept/listTree',
        method: 'get',
        params: {}
      }).then(res => {
        if (res.code == 200) {
          this.textOptions = res.data
          if(this.value) {
            let tempKeys = this.value.split(',')
            let tempName = []
            tempKeys.forEach(item => {
              tempName.push(this.searchName(this.textOptions, item))
            })
            this.data = tempName.join()
          }
        }
      })
    },
    searchName(arr, id) {
      for(let i in arr) {
        if(arr[i].deptId == id) {
          return arr[i].deptName
        }else if(arr[i].children && arr[i].children.length > 0) {
          let res = this.searchName(arr[i].children, id)
          return res
        }
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.diaPart {
  .textPart {
    height: 350px;
    overflow-y: auto;
  }
  /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
  ::-webkit-scrollbar{
    width: 8px;
    height: 8px;
    background-color: #fff;
  }
  /*定义滑块 内阴影+圆角*/
  ::-webkit-scrollbar-thumb{
    border-radius: 4px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
    background-color: #E5E5E5;
  }
}
</style>